"use client"; // 添加这一行，使组件变为 Client Component
import { useEffect } from "react";

import { Collapse, CollapseProps, Form, Input } from "antd";

import { RootState, useAppDispatch } from "@/store/client";
import { useSelector } from "react-redux";
import { updataComponent } from "@/store/client/modules/reactdndStore";

interface MyComponentProps {
    handleDrop?: (e?: any) => void;
    state?: any;
    children?: any;
}
type FieldType = {
    name?: string;
    label?: string;
    onChange?: string;
    remember?: string;
};
const RightDropableView: React.FC<MyComponentProps> = () => {
    const [form] = Form.useForm();
    const dispatch = useAppDispatch()
    const nowDataStore: any = useSelector((state: RootState) => state.reactDnd.nowData);
    const boxData = useSelector((state: RootState) => state.reactDnd.boxData);
    // console.log("right", boxData, nowDataStore)
    const Node = boxData[nowDataStore?.id] 
    useEffect(() => {
        if (Node?.label) {


            form.setFieldsValue({
                label: Node?.label,
                onChange: Node?.onChange,
            });
        }
    }, [Node])
    const onValuesChange = (changedValues: Record<string, any>, allValues: Record<string, any>) => {
        console.log("变化的字段:", changedValues);
        console.log("所有字段的值:", allValues);
        const data={
            ...Node,
            label:allValues.label,
            onChange:allValues.onChange
        }
         dispatch(updataComponent({...Node,...allValues}))
    };

    const items: CollapseProps['items'] = [
        {
            key: '1',
            label: '常见属性',
            children: <div>
                <Form
                    form={form}
                    name="basicssss"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onValuesChange={onValuesChange}
                    autoComplete="off">
                    <Form.Item<FieldType>
                        label="标签"
                        name="label"
                        rules={[{ required: true, message: '请输入标签' }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item<FieldType>
                        label="onChange"
                        name="onChange"
                        rules={[{ required: true, message: '请输入对应的js' }]}>
                        <Input />
                    </Form.Item>




                </Form>
            </div>
            ,
        },
        // {
        //     key: '2',
        //     label: 'This is panel header 2',
        //     children: <p>{Node}</p>,
        // },
        // {
        //     key: '3',
        //     label: 'This is panel header 3',
        //     children: <p>{Node}</p>,
        // },
    ];
    useEffect(() => {

    }, [])
    const onChange = (key: string | string[]) => {
        console.log(key);
    };
    return (

        <div className={'w-full h-full rounded border border-dashed border-gray-400'}>
            <Collapse items={items} defaultActiveKey={['1']} expandIconPosition="end" ghost onChange={onChange} />
        </div>
    )

}
export default RightDropableView;